<!--
 * @Description: 转换日期格式
 * @Author: gaoyunpeng
 * @Date: 2022-01-18 21:19:15
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="datetime">
    <span> {{ dateYear }}</span>
    <span>{{ dateWeek }}</span>
    <span>{{ dateDay }}</span>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { formatTime } from '../utils/index';
@Component
export default class DateTime extends Vue {
  private timing: any = null;
  private dateDay: any = null;
  private dateYear: any = null;
  private dateWeek: any = null;
  private weekday: any[] = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  destroyed() {
    clearInterval(this.timing);
    // 组件销毁时，销毁定时器 防止内存溢出
  }
  private timeFn() {
    this.timing = setInterval(() => {
      this.dateDay = formatTime(new Date(), 'HH:mm:ss');
      this.dateYear = formatTime(new Date(), 'yyyy.MM.dd');
      this.dateWeek = this.weekday[new Date().getDay()];
    }, 1000);
  }
  mounted() {
    this.timeFn();
  }
}
</script>

<style scoped lang="scss">
.datetime {
  color: #fff;
  span {
    font-size: 14px;
    &:nth-child(2) {
      margin: 0 10px;
    }
  }
}
</style>
